<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>用户登录</title>
        <script src="/lib/axios.js"></script>
        <script src="/lib/vue.js"></script>
        <link rel="stylesheet" href="/lib/elementindex.css">
        <script src="/lib/elementindex.js"></script>
        <style>
        </style>
    </head>
    <body>
        <div id='app'>

            <el-tabs value='scriptFileMode'>
                <el-tab-pane label="脚本文件" name="scriptFileMode">
                    <el-form label-width="140px">
                        <el-form-item label='脚本文件模式'>
                            <el-select :disabled='adminConfig.projectList.length>0' v-model="adminConfig.scriptFileMode" placeholder="请选择">
                                <el-option value='allInOne' label='单文件模式'>
                                </el-option>
                                <el-option value='justSelf' label='多文件模式'>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-card style='font-size: small;'>
                            注意事项<i class="el-icon-info"></i>
                            <div>
                                <li>多文件模式：针对项目内每一个规则对象，生成一个单独的脚本文件；建议设计环境使用。</li>
                                <li>单文件模式：一个项目的所有规则对象，生成单一的脚本文件；建议生产运行环境使用。</li>
                                <li>文件模式选定后，不能在仓库存在项目的情况下修改。这种情况下需要修改需要通过：导出项目配置文件--》删除现有项目--》修改文件模式--》重新导入现有项目。</li>
                            </div>
                        </el-card>
                    </el-form>
                </el-tab-pane>

                <el-tab-pane label="远程仓库" name="remote">
                    <el-table :indent="20" :data="adminConfig.remoteList" style="width: 100%;margin-bottom: 20px;"
                        row-key="id" border empty-text='请先完成基本设置'>
                        <el-table-column label="服务地址" prop="host" sortable>
                            <template slot-scope="scope">
                                <el-input v-model='scope.row.host'></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="appKey" prop="appKey">
                            <template slot-scope="scope">
                                <el-input v-model='scope.row.appKey'></el-input>
                            </template>
                        </el-table-column>
                        <el-table-column label="appSecret" prop="appSecret">
                            <template slot-scope="scope">
                                <el-input type='password' v-model='scope.row.appSecret'></el-input>
                            </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
            <br/>
            <el-form label-width="80px">
                <el-form-item>
                    <el-button type="primary" @click='handleSettingSave'>保存修改</el-button>
                </el-form-item>
            </el-form>
        </div>

        <script type='module'>
            import * as $util from '/lib/hc-util.js'
            import * as $rest from '/lib/hc-rest-service.js'
            window.vm = new Vue({
                el: '#app',
                data: {
                    adminConfig:{projectList:[]},
                },
                methods: {
                    handleSettingSave(){
                        let self = this;
                        $rest.postdata('/admin/save',this.adminConfig,function(adminConfig)
                            {
                                 self.adminConfig = adminConfig;
                                 self.$message({
                                     type:'success',
                                     message:'保存成功'
                                 });
                            }
                        );
                    },
                },
            });
            $rest.getdata('/admin/load',(data)=>{
                vm.adminConfig = data;
            })
        </script>
    </body>
</html>
